<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
  font-family: Arial, sans-serif;
}

#taskInput {
  width: 300px;
  padding: 10px;
  margin-bottom: 10px;
}

#addTaskButton {
  padding: 10px 20px;
  background-color: lightblue;
  border: none;
  cursor: pointer;
}

#taskList {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#taskList li {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

#taskList li:last-child {
  border-bottom: none;
}
    </style>
</head>
<body>
    <h2>待办事项列表</h2>
    
    <input type="text" id="taskInput" placeholder="输入待办事项...">
    
    <button id="addTaskButton">添加</button>
    
    <ul id="taskList"></ul>
    <script>
        var taskList = [];

            // 获取输入框、添加按钮和任务列表元素
            var taskInput = document.getElementById("taskInput");
            var addTaskButton = document.getElementById("addTaskButton");
            var taskListElement = document.getElementById("taskList");

            // 添加任务的事件处理程序
            addTaskButton.addEventListener("click", function () {
                var task = taskInput.value;
                if (task !== "") {
                    taskList.push(task);
                    addTaskToUI(task);
                    taskInput.value = "";
                }
            });

            // 将任务添加到 UI 的函数
            function addTaskToUI(task) {
                var li = document.createElement("li");
                li.textContent = task;
                taskListElement.appendChild(li);
            }
    </script>
</body>
</html>